<template>
    <div>
<h2>酒店列表</h2>
<h2>酒店显示</h2>
<div>
    酒店名称:<input type="text" v-model="cha.name">
    地区:<select v-model="cha.addressid">
                    <option value="">请选择</option>
                    <option :value="item.hotelCityId" v-for="item in list">{{item.hotelCityName}}</option>
                </select>
                  <input type="button" value="查询" class="btn btn-primary" @click="gethotelList">
</div>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td><input type="checkbox" v-model="checked"  @click="getall()"></td>
            <td>Id</td>
            <td>酒店名称</td>
            <td>联系电话</td>
            <td>地区</td>
            <td>酒店图片</td>
            <td>详细地址</td>
            <td>状态</td>
            <td>开业时间</td>
            <td>酒店介绍</td>
            <td>交通指引</td>
            <td>酒店政策</td>
            <td>操作</td>
        </tr>
         <tr v-for="item in page.list" :key="item.hotelId">
            <td><input type="checkbox" v-model="ids" :value="item.hotelId" @change="" ></td>
            <td>{{item.hotelId}}</td>
            <td>{{item.hotelName}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.hotelCityName}}</td>
            <td><img :src="item.hotelImg" width="100" height="100"></td>
            <td>{{item.addressDic}}</td>
            <td>{{item.state ? "开业":"停业"}}</td>
            <td>{{moment(item.createTime).format('YYYY-MM-DD')}}</td>
            <td>{{item.hotelDesc}}</td>
            <td>{{item.transport}}</td>
            <td>{{item.policy}}</td>
            <td>
                <input type="button" value="删除" class="btn btn-danger">
                <input type="button" value="修改" class="btn btn-info">
            </td>
        </tr>
    </tbody>
</table>
<div>
<span>总<b>{{page.totalCount}}</b>条</span>
<span>每页<b>{{cha.pagesize}}</b>条</span>
<span>第<b>{{cha.pageindex}}/{{page.totalPage}}</b>页</span>
<input type="button" value="首页" @click="fen(1)">
<input type="button" value="上一页" @click="fen(cha.pageindex-1)">
<span v-for="item in page.totalPage" @click="fen(item)">{{item}}</span>
<input type="button" value="下一页" @click="fen(cha.pageindex+1)">
<input type="button" value="尾页" @click="fen(page.totalPage)">
<input type="number" v-model="cha.pageindex">
<input type="button" value="跳转" @click="fen(cha.pageindex)">
<select v-model="cha.pagesize" @change="show">
    <option :value="item" v-for="item in a">每页{{item}}条</option>
</select>

</div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute,useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

//单个复选框选中与未选中
let checked: any = ref(false);
//多个复选框获取值
let ids: any = ref([]);

let a:any = ref([2,4,6,8]);
let cha:any = reactive({
    pageindex:1,
    pagesize:2,
    name:'',
    addressid:''
})
let page:any = reactive({
    list:[],
    totalCount:'',
    totalPage:'',
})

let list:any = ref([]);

onMounted(()=>{
    gethotelList();
    getCity();
    show();
})

const show =()=>{
    cha.pageindex=1;
    gethotelList();
}

const getall=()=>{
if(checked.value == true){
checked.value = false
}else{
    checked.value=true
}
  if (checked.value == true) {
    //逻辑：如果被选中时：将data中的list中的id放到ids中
    ids.value = page.list.map((item: any) => {
      return item.Id;
    });
  } else {
    //逻辑：如果没有被选中时：将ids变空数组
    ids.value = [];
  }

  console.log(ids.value);
}


const fen = (num:any)=>{
if(num < 1){
cha.pageindex = 1;
return;
}
if(num > page.totalPage){
cha.pageindex=page.totalPage;
return;
}
cha.pageindex=num;
gethotelList();
}



const getCity = ()=>{
axios({
    url:'/api/Hotel/GetHotelCity',
    method:'get',
    params:list,
})
.then(res=>{
    console.log(res);
    list.value = res.data;
})
.catch(err=>{
    console.log(err);
    
})
}
const gethotelList = ()=>{
    axios({
        url:'/api/Hotel/GetHotels',
        method:'get',
        params:cha,
    })
    .then(res=>{
        console.log(res);
        Object.assign(page,res.data)
    })
    .catch(err=>{
console.log(err);

    })
}

</script>

<style scoped>
b{
    color: red;
}
span{
    margin: 8px;
}
</style>